<div id="eli-layout-container">
    <dx-button class="dx-icon dx-icon-flat-save" [hint]="'saveLayout' | translate" (onClick)="saveLayout()"> </dx-button>
    <dx-button class="dx-icon dx-icon-flat-delete" [hint]="'removeLayout' | translate" (onClick)="removeLayout()"> </dx-button>
    <dx-button class="dx-icon dx-icon-flat-saveAs" [hint]="'saveLayoutAs' | translate" (onClick)="saveLayoutAs()"> </dx-button>
    <dx-select-box class="eli-cmp-selector" [dataSource]="componentInfos" [placeholder]="'selectLayout' | translate" displayExpr="componentName"
        [(ngModel)]="selectedComponentInfo"></dx-select-box>
</div>
<dx-popup id="eli-cmp-editor-container" class="eli-cmp-editor" [showTitle]="config?.showEditorTitle" [title]="config?.editorTitle | translate"
    [dragEnabled]="config?.editorDragEnabled" [closeOnOutsideClick]="config?.editorCloseOnOutsideClick" [(visible)]="config.editorVisible"
    width="300" height="140">
    <div class="eli-cmp-editor-title" *dxTemplate="let data of 'title'">
        <span>{{ config?.editorTitle | translate }}</span>
    </div>
    <div class="eli-cmp-editor-con" *dxTemplate="let data of 'content'">
        <div class="eli-cmp-con-form">
            <span class="col-sm-4">{{ 'layoutName' | translate}}</span>
            <input class="col-sm-7" type="text" [(ngModel)]='this.editingCmpInfo.name'>
        </div>
        <div class="eli-cmp-con-btn">
            <dx-button [text]="'saveLayoutSetting' | translate" class="eli-cmp-editor-save" [disabled]="!this.editingCmpInfo.name" (onClick)="saveLayoutSettingAs()"></dx-button>
            <dx-button [text]="'cancelLayoutSetting' | translate" class="eli-cmp-editor-cancel" (onClick)="cancelSaveLayoutSetting()"></dx-button>
        </div>
    </div>
</dx-popup>